<template>
  <div class="broadcast_storage">
    <div v-if="broadcastListStr">
      <!-- <div class="big_title_style" style="font-size: 18px">已入库商品</div> -->

      <div class="box-shadow">
        <div style="padding: 20px">
          <el-table :data="info" style="width: 100%" border>
            <el-table-column prop="name" label="基本信息">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <div
                    style="width: 100px; height: 100px;border-radius: 4px;overflow: hidden"
                    v-html="imgTransition(scope.row.coverImgUrl)"
                  ></div>
                  <div style="margin-left: 5px">
                    <div>{{ scope.row.name }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="价格" width="150">
              <template slot-scope="scope">

                <div style="margin-top: 10px" v-if="scope.row.priceType == 1">
                  <span style="text-align: center">￥{{ scope.row.price }}元&nbsp;</span>
                </div>

                <div style="margin-top: 10px" v-if="scope.row.priceType == 2 || scope.row.priceType == 3">
                  <span style="text-align: center"
                    >￥{{ scope.row.price }}元&nbsp;--&nbsp;￥{{
                      scope.row.price2
                    }}元</span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="url" label="链接" width="300"> </el-table-column>
            <el-table-column prop="address" label="操作" width="220">
              <template slot-scope="scope">
                <div v-if="scope.row.operation == 1">
                  <span style="margin-right: 15px">
                    <el-popover placement="bottom" width="100%" trigger="click">
                      <img v-if="codeImg" style="width: 200px; height: 200px" :src="codeImg"/>
                      <el-link slot="reference" :underline="false" @click="shareImgMethod(scope.row.url)" type="primary">商品预览</el-link>
                    </el-popover>
                  </span>
                  <span style="margin-right: 15px">
                    <el-link @click="openUpdateGood(scope.row)" :underline="false" type="primary">修改价格</el-link>
                  </span>
                  <span><el-link type="danger" :underline="false" @click="deleteGood(scope.row)">删除</el-link></span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :page-size="query.limit"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog title="修改价格" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="价格形式">
          <el-radio-group v-model="form.priceType">
            <el-radio label="1">一口价</el-radio>
            <el-radio label="2">价格区间</el-radio>
            <el-radio label="3">显示折扣价</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="form.priceType == 1" label="价格">
          <el-input
            clearable
            size="small"
            v-model="form.price"
            style="width: 200px"
          />
          <span style="margin: 0 5px"> 元 </span>
        </el-form-item>

        <el-form-item v-if="form.priceType == 2" label="价格区间">
          <el-input
            clearable
            size="small"
            v-model="form.price"
            style="width: 200px"
          />
          <span style="margin: 0 5px"> 元 - </span>
          <el-input style="width: 200px" v-model="form.price2" />
          元
        </el-form-item>

        <el-form-item v-if="form.priceType == 3" label="折扣区间">
          <el-input
            clearable
            size="small"
            v-model="form.price"
            style="width: 200px"
          />
          <span style="margin: 0 5px"> 元 - </span>
          <el-input style="width: 200px" v-model="form.price2" />
          元
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateGood">提交审核</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- </div> -->
</template>

<script>
import {
  getGoodsList,
  deleteGood,
  updateGood,
} from "@/api/applet/broadcastGood";
import { codeImg } from "@/api/product/info";
import { getShare } from "@/api/applet/broadcast";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    broadcastListStr: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    //这里存数据
    return {
      codeImg: "",
      cdnUrl: "",
      //按钮聚焦
      autofocus: true,
      //修改价格
      dialogVisible: false,
      //商品数据
      form: {},
      //商品数据
      info: [],
      //总数量
      total: 0,
      query: {
        offset: 1,
        limit: 5,
        status: 2,
      },
      resetauditData: {
        auditId: 0,
        goodsId: 0,
      },
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法
  methods: {
    //获取商品列表
    getData() {
      getGoodsList(this.query).then((response) => {
        this.info = response.data.goods;
        this.total = response.data.total;
      });
    },
    //删除商品
    deleteGood(goods) {
      let $this = this
      this.$confirm("您确认删除【" + goods.name + "】商品吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        deleteGood(goods.goodsId).then((response) => {
          if (response.data) {
            $this.getData()
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$message.error("网络繁忙，请稍后重试");
          }
        });
      });
    },
    //开播码
    shareImgMethod(id) {
      let theRequest = new Object();
          if (id.indexOf("?") != -1) {
              let str = id.substr(1);
              let strs = str.split("&");
              for ( let i = 0; i < strs.length; i++) {
                  theRequest = unescape(strs[i].split("=")[1]);
              }
          }
      codeImg(theRequest).then((response) => {
        this.codeImg = response.msg;
      });
    },
    //换页
    handleCurrentChange: function (cpage) {
      this.query.offset = cpage;
      this.getData();
    },
    //状态
    state(auditStatus) {
      if (auditStatus == 0) {
        return "未审核";
      } else if (auditStatus == 1) {
        return "审核中";
      } else if (auditStatus == 2) {
        return "审核通过";
      } else if (auditStatus == 3) {
        return "审核失败";
      }
    },
    //打开编辑价格窗口
    openUpdateGood(data) {
      this.form = data;
      this.form.priceType = String(this.form.priceType);
      this.dialogVisible = true;
    },
    //更新商品
    updateGood() {
      console.log(this.form);
      updateGood(this.form).then((response) => {
        if (response.data) {
          this.dialogVisible = false;
          this.getData();
          this.$message({
            message: "修改成功",
            type: "success",
          });
        } else {
          this.$message.error("网络繁忙，请稍后重试");
        }
      });
    },
    //转换微信图片
    imgTransition(img) {
      var imgid = Math.random(),
        frameid = "frameimg" + imgid;
      window["img" + imgid] =
        '<img id="img" style="width:89px;height:89px" src=\'' +
        img +
        "?kilobug' />" +
        "<script>window.onload = function() { parent.document.getElementById('" +
        frameid +
        "').height = document.getElementById('img').height+'px'; }<" +
        "/script>";
      let msg =
        '<iframe id="' +
        frameid +
        '" src="javascript:parent[\'img' +
        imgid +
        '\'];" frameBorder="0" scrolling="no" width="100px"></iframe>';
      return msg;
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.getData()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //声明周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁之后
  activated() {}, //缓存keep-alive
};
</script>

<style scoped>
.broadcast_storage {
  width: 80%;
  min-width: 1000px;
  margin: 30px auto 0;
}

.box-shadow {
  border: 1px solid #eee;
  width: 100%;
  height: auto;
  margin: 30px auto 0;
  background-color: whitesmoke;
  position: relative;
  background-color: white;
  border-radius: 10px
}

.typeface {
  display: inline-block;
  font-size: 30px;
  color: #333;
  position: relative;
}

.typeface2 {
  color: #c0c4cc;
  font-size: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}
.pagination {
  margin: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
